// 目的：跨级组件通信
// 顺序：Father->Son->GrandSon
// 越过Son直接到达GrandSon。
// Father->GrandSon

// 跨级组件通信
// 导入createContext和useContext
import { createContext, useContext } from "react";
// 定义Context
const MsgContext = createContext("");

// 这是Son组件
const SonComponent = () => {
  return (
    <>
      <div>this is Son</div>
      {/* 使用GrandSon组件 */}
      <GrandSonComponent />
    </>
  );
};

// 这是GrandSon组件
const GrandSonComponent = () => {
  // 从Context中获取值
  const msg = useContext(MsgContext);
  return (
    <>
      <div>this is GrandSon,{msg}</div>
    </>
  );
};

const GrandComponentsConnectDemo = () => {
  const name = "this is father";
  return (
    <>
      {/* 提供Context的值 */}
      <MsgContext.Provider value={name}>
        {name}
        <SonComponent />
      </MsgContext.Provider>
      {/* 使用Son组件 */}
    </>
  );
};

export default GrandComponentsConnectDemo;
